<template>
  <div id="app">
    <Card>
      <SearchForm ref="form" :options="options" :form="form">
        <a-form-model-item slot="item" label="Activity zone" prop="region">
          <a-select
            v-model="form.region"
            labelAlign="right"
            placeholder="please select your zone"
          >
            <a-select-option value="shanghai">
              Zone one
            </a-select-option>
            <a-select-option value="beijing">
              Zone two
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </SearchForm>
      <SearchForm
        ref="form"
        :options="options"
        :form="form"
        @enterSearchData="enterSearchData"
      >
      </SearchForm>
      <br />
      <a-button @click="getData">获取数据</a-button>
      <DataTable
        :colOptions="colOptions"
        :reqFun="getFun"
        :param="searchParam"
        :add="true"
        :isSearchTable="true"
        @clearData="clearData"
        @add="add"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :edit-rules="validRules"
      >
        <vxe-column field="sex2" title="多选下拉" slot="sex2" :edit-render="{}">
          <template #default="{ row }">
            <span>{{ formatMultiSex(row.sex2) }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.sex2" type="text" multiple transfer>
              <vxe-option
                v-for="item in sexList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-table-column title="操作" slot="dada">
          <template slot-scope="{ row }">
            <a @click="edit(row)">编辑</a>
          </template>
        </vxe-table-column>
      </DataTable>
    </Card>
    <CommonDialog :visible.sync="visible">
      <div>还是说</div>
      <a-button slot="btn">放弃</a-button>
    </CommonDialog>
  </div>
</template>

<script>
import SearchForm from './views/SearchForm.vue'
import { enums } from './enums/index'
import Card from './views/Card.vue'
import DataTable from './views/DataTable.vue'
import CommonDialog from './views/CommonDialog.vue'
export default {
  name: 'App',
  components: {
    SearchForm,
    Card,
    DataTable,
    CommonDialog
  },

  data() {
    const nameValid = ({ cellValue }) => {
      // 模拟服务端校验
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (cellValue && (cellValue.length < 3 || cellValue.length > 50)) {
            reject(new Error('名称长度在 3 到 50 个字符之间'))
          } else {
            resolve()
          }
        }, 100)
      })
    }
    const roleValid = ({ cellValue }) => {
      if (
        cellValue &&
        !['Develop', 'Test', 'Designer', 'PM'].includes(cellValue)
      ) {
        return new Error('角色输入不正确')
      }
    }
    return {
      visible:true,
      enums: enums,
      sexList: [
        { label: '男', value: '1' },
        { label: '女', value: '0' },
      ],
      validRules: {
        name: [
          { required: true, message: '名称为必填项' },
          { validator: nameValid },
        ],
        role: [{ validator: roleValid }],
        sex2: [
          { required: true, message: '性别必须填写' },
          { pattern: /^[0,1]{1}$/, message: '格式不正确' },
        ],
        age: [{ pattern: '^[0-9]{0,3}$', message: '格式不正确' }],
      },
      selectData: '',
      inputValue: '',

      form: {},
    }
  },

  // watch: {
  //   'form.dateRange'(newValue, oldValue) {
  //     console.log('newValue', this.$dateFormat(newValue[0]), oldValue)
  //     this.form.createTime = this.$dateFormat(newValue[0]);
  //     this.form.endTime = this.$dateFormat(newValue[1])

  //   },
  // },
  computed: {
    //只有一个时间格式的数据时，当出现多个时间参数时可以考虑用插槽实现
    searchParam() {
      return this.params(this.form, 'createTimeStart', 'createTimeEnd')
    },
    colOptions() {
      return [
        {
          label: '',
          type: 'checkbox',
        },

        {
          label: '商品编号',
          prop: 'code',
          link: 'www.baidu.com',
        },
        {
          label: '商品名称',
          prop: 'name',
          type: 'inputEdit',
        },
        {
          label: '公司',
          prop: 'company',
          type: 'enum',
          enums: enums,
        },
        {
          label: '价格',
          prop: 'price',
        },
        {
          slotName: 'sex2',
        },
        {
          slotName: 'dada',
        },
      ]
    },
    options() {
      return [
        [
          {
            label: '姓名',
            field: 'name',
            type: 'input',
            require: true,
            rules: [
              {
                required: true,
                message: 'Please input Activity name',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '年龄',
            field: 'age',
            type: 'input',
          },
          {
            label: '性别',
            field: 'sex',
            type: 'input',
          },
          {
            label: '学校',
            field: 'school',
            type: 'input',
          },
          {
            label: '创建时间',
            type: 'dateRange',
            field: 'dateRange',
          },
        ],
        [
          {
            slotName: 'item',
          },
        ],
        [
          {
            label: '公司',
            field: 'companyName',
            type: 'select',
            require: true,
            placeholder: '请选择',
            rules: [
              {
                required: true,
                message: 'Please input Activity name',
                trigger: 'change',
              },
            ],
            enums: enums,
            events: {
              change: (val) => {
                console.log('val', val)
              },
            },
          },
          {
            label: '手机',
            field: 'phone',
            type: 'radio',
            require: true,
            rules: [
              {
                required: true,
                message: 'Please input Activity name',
                trigger: 'change',
              },
            ],
            enums: enums,
          },
          {
            label: '手机公司',
            field: 'phoneCompany',
            type: 'checkbox',
            require: true,
            rules: [
              {
                required: true,
                message: 'Please input Activity name',
                trigger: 'change',
              },
            ],
            enums: enums,
          },
        ],
      ]
    },
  },

  created() {
    console.log('enums', Object.entries(enums))
  },
  methods: {
    clearData() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    add() {},
    enterSearchData() {},
    async getData() {
      await this.$refs.form.onSubmit()
      console.log('formData', this.params(this.form))
    },
    getFun(form) {
      console.log('form', form)
      return new Promise((resolve, reject) => {
        if (this.colOptions.length > 0) {
          resolve(form)
        } else {
          reject('报错了')
        }
      })
    },

    //处理参数 formData：搜索参数 createTimeStart:开始时间名称 createTimeEnd：结束时间名称
    params(formData, createTimeStart, createTimeEnd) {
      let nweParam = {}
      if (formData['dateRange'] && formData['dateRange'].length > 0) {
        formData[createTimeStart] = this.$dateFormat(formData['dateRange'][0])
        formData[createTimeEnd] = this.$dateFormat(formData['dateRange'][1])
      } else {
        formData[createTimeStart] = ''
        formData[createTimeEnd] = ''
      }

      for (let i in formData) {
        if (i !== 'dateRange') {
          nweParam[i] = formData[i]
        } else {
          this.$delete(nweParam, 'dateRange')
        }
      }
      return nweParam
    },
    formatMultiSex(values) {
      if (values) {
        return values.map((val) => this.formatSex(val)).join(',')
      }
      return ''
    },
    formatSex(value) {
      if (value === '1') {
        return '男'
      }
      if (value === '0') {
        return '女'
      }
      return ''
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 1200px;
  margin: 0 auto;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
